<template>
    <div>
        <Form ref="form" :model="ruleFrom">
            <Row :gutter="10" type="flex" class="timeList">
                <Col>
                    <FormItem>
                        <RadioGroup v-model="visitType" type="button" @on-change="handleChangeVisitType">
                            <Radio label="1">日</Radio>
                            <Radio label="2">周</Radio>
                            <Radio label="3">月</Radio>
                        </RadioGroup>
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem>
                        <DatePicker v-width="'100%'"  :clearable="false"  @on-change="getTreatmentReports" type="daterange" v-model="ruleFrom.time" placeholder="日期选择" />
                    </FormItem>
                </Col>
                <Col v-bind="grid">
                    <FormItem>
                        <Select v-model="ruleFrom.profession_id" placeholder="请选择" @on-change="personalStatus">
                            <Option value="302">客服</Option>
                            <Option value="301">医助</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
        </Form>
        <Table show-summary @on-cell-click="cellClick" border size="small" ref="table" :columns="columns" :data="data" :loading="loading"></Table>
        <table-list ref="DrawerList"></table-list>
    </div>
</template>

<script>
    import { getFirstDayOfWeek, getFirstDayOnWeek, getFirstMonthOnWeek } from '@/utils/datetime'
    import { getManagementList } from '@/api/report'
    import TableList from './module/table-list'
    import dayjs from 'dayjs'
    import $ from 'jquery'
    export default {
        name: 'reportTab',
        components: {
            TableList
        },
        data () {
            return {
                visitType: '1',
                ruleFrom: {
                    profession_id: '301',
                    time: []
                },
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                nowDayTime: '',
                nowWeekStart: '',
                nowWeekEnd: '',
                nowMonthStart: '',
                nowMonthEnd: '',
                loading: false,
                data: [],
                oldColumns: [
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 80,
                        className: 'nodePoint'
                    }
                ],
                columns: [
                    {
                        title: '人员',
                        key: 'mmeber_name',
                        minWidth: 119,
                        className: 'nodePoint'
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 80,
                        className: 'nodePoint'
                    },
                    {
                        title: '新增',
                        key: 'add_num',
                        minWidth: 90
                    },
                    {
                        title: '预到',
                        key: 'pre_num',
                        minWidth: 125
                    },
                    {
                        title: '过期未到',
                        key: 'pass_num',
                        minWidth: 125
                    },
                    {
                        title: '已回访',
                        key: 'achieve_callback_num',
                        minWidth: 125
                    },
                    {
                        title: '过期未回访',
                        key: 'no_callback_num',
                        minWidth: 118
                    },
                    {
                        title: '复诊人数',
                        key: 'revisiting_num',
                        minWidth: 271
                    }
                ]
            }
        },
        created () {
            this.getNowDay()
        },
        mounted () {
            // this.onLoad()
        },
        methods: {
            // 今天 周 月
            getNowDay () {
                const now = new Date()
                const nowMonth = now.getMonth()
                const nowYear = now.getFullYear()
                this.nowDayTime = now
                this.nowMonthStart = new Date(nowYear, nowMonth, 1)
                this.nowMonthEnd = getFirstMonthOnWeek(new Date())
                this.nowWeekStart = getFirstDayOfWeek(new Date())
                this.nowWeekEnd = getFirstDayOnWeek(new Date())
                this.ruleFrom.time = [this.nowDayTime, this.nowDayTime]
            },
            // 切换日 周 月
            handleChangeVisitType (e) {
                switch (e) {
                case '1':
                    this.ruleFrom.time = [this.nowDayTime, this.nowDayTime]
                    break
                case '2':
                    this.ruleFrom.time = [this.nowWeekStart, this.nowWeekEnd]
                    break
                case '3':
                    this.ruleFrom.time = [this.nowMonthStart, this.nowMonthEnd]
                    break
                default:
                    this.ruleFrom.time = [this.nowDayTime, this.nowDayTime]
                    this.switchTime = '1'
                    break
                }
                this.onLoad()
            },
            // 选择日期
            getTreatmentReports (e) {
                const d = new Date(e[0])
                d.setMonth(d.getMonth() + 3);
                var yy1 = d.getFullYear();
                var mm1 = d.getMonth() + 1;
                var dd1 = d.getDate();
                if (mm1 < 10) {
                    mm1 = '0' + mm1;
                }
                if (dd1 < 10) {
                    dd1 = '0' + dd1;
                }
                const compare = yy1 + '-' + mm1 + '-' + dd1
                if (dayjs(e[1]).isAfter(dayjs(compare))) {
                    this.$Message.warning('时间最长不得超过3个月!!!');
                } else {
                    if (!e) return false
                    const startTime = e[0] || ''
                    const endTime = e[1] || ''
                    const nowDay = dayjs(this.nowDayTime).format('YYYY-MM-DD') // 当天
                    const nowMonthStart = dayjs(this.nowMonthStart).format('YYYY-MM-DD') // 当月第一天
                    const nowMonthEnd = dayjs(this.nowMonthEnd).format('YYYY-MM-DD') // 当月最后一天
                    const nowWeekStart = dayjs(this.nowWeekStart).format('YYYY-MM-DD') // 周一
                    const nowWeekEnd = dayjs(this.nowWeekEnd).format('YYYY-MM-DD') // 周日
                    if (startTime === nowDay && endTime === nowDay) {
                        this.visitType = '1'
                    } else if (startTime === nowWeekStart && endTime === nowWeekEnd) {
                        this.visitType = '2'
                    } else if (startTime === nowMonthStart && endTime === nowMonthEnd) {
                        this.visitType = '3'
                    } else {
                        this.visitType = ''
                    }
                    this.onLoad()
                }
            },
            // 切换下拉框
            personalStatus (e) {
                if (e === '302') {
                    this.columns.splice(1, 1)
                } else {
                    this.columns.splice(1, 0, this.oldColumns[0])
                }
                this.onLoad()
            },
            getConfig () {
                return {
                    date_type: this.visitType,
                    profession_id: this.ruleFrom.profession_id,
                    start_time: this.ruleFrom.time[0] !== '' ? dayjs(this.ruleFrom.time[0]).format('YYYY-MM-DD') : '',
                    end_time: this.ruleFrom.time[1] !== '' ? dayjs(this.ruleFrom.time[1]).format('YYYY-MM-DD') : ''
                }
            },
            onLoad () {
                this.loading = true
                const config = this.getConfig()
                $('.tbActive').removeClass('tbActive')
                getManagementList(config).then(res => {
                    this.data = res || []
                }).finally(() => {
                    this.$nextTick(() => {
                        this.loading = false
                    })
                })
            },
            // 全局点击事件
            cellClick (row, column, data, e) {
                if (column.key === 'clinic_name' || column.key === 'mmeber_name') return false
                const that = e.target
                $('.tbActive').removeClass('tbActive')
                $(that).parent().addClass('tbActive')
                let status = ''
                if (column.key === 'add_num') { // 新增
                    status = 1
                } else if (column.key === 'pre_num') { // 预到
                    status = 2
                } else if (column.key === 'pass_num') { // 过期未到
                    status = 3
                } else if (column.key === 'achieve_callback_num') { // 已回访
                    status = 4
                } else if (column.key === 'no_callback_num') { // 过期未回访
                    status = 5
                } else if (column.key === 'revisiting_num') { // 复诊人数
                    status = 6
                }
                const params = {
                    member_id: row.member_id || '',
                    data_type: status,
                    ...this.getConfig()
                }
                this.$refs.DrawerList.handleDrawer(params)
            }
        }
    }
</script>

<style scoped>
    /deep/.ivu-table-cell {
        height: 40px;
        line-height: 40px;
        cursor: pointer;
    }
    /deep/.ivu-table-summary .ivu-table-cell {
        cursor: text;
    }
    /deep/.ivu-table-header thead tr th .ivu-table-cell,
    /deep/.ivu-table-fixed-header thead tr th .ivu-table-cell{
        height: auto;
        line-height: normal;
    }
    /deep/.ivu-table thead tr th .ivu-table-cell {
        cursor: text;
    }
</style>
